<template>
  <div class="error404">
    <div class="error404-body-con">
      <el-card class="box-card">
        <el-divider content-position="left">请选择需要登录的部门，或重新登录！</el-divider>
        <el-tree :data="deptTreeData" :props="defaultProps"  check-strictly default-expand-all
        node-key="relId"
        :default-checked-keys= "checkedKeys"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        @node-click="nodeClickHandle"
        ></el-tree>
        <div class="error404-btn-con">
          <el-button size="large" style="width: 200px;margin-left: 40px;" @click="logout">重新登陆</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {fetchTree,getObj} from '@/api/admin/dept'
  import {resetRouter} from '@/router/router'
  import {getLoginUserOrgTree} from '@/api/admin/org'
  import {getStore, setStore} from '@/util/store'
  import {mapGetters} from 'vuex'
export default {
  name: 'selectDept',
  inject:['reload'],
    data() {
    return {
      checkedKeys: [],
      deptTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
    ...mapGetters(['tagWel','userInfo'])
  },
  created() {
    this.getDeptTreeData();
  },
  methods: {
    // 获取部门树列表
    getDeptTreeData() {
      getLoginUserOrgTree(this.userInfo.id).then(result => {
        this.deptTreeData = result.data.data
      })
    },
    // 选择所在部门
    nodeClickHandle(data,node,root){
      if(node.isLeaf){
        getObj(data.relId).then(result => {
          let unitId = node.parent.data.relId
          let deptType = result.data.data.deptType
          this.userInfo.deptType = deptType
          this.userInfo.lessDeptId = data.relId
          this.userInfo.lessDeptName = data.name
          this.userInfo.unitId = unitId
          let deptData = {lessDeptId: data.relId,lessDeptName:data.name,unitId: unitId,deptType: deptType}
          setStore({ name: 'deptData', content: JSON.stringify(deptData) })
          setStore({ name: 'deptId', content: data.relId })
          this.$store.dispatch('SelectDept',this.userInfo)
          this.$store.commit('DEL_ALL_TAG')
          resetRouter();
          this.$router.push({ path: this.tagWel.value })
        })
      }else{
        this.$message.warning('请选择部门节点')
      }

    },
    logout() {
      this.$confirm('是否退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
            this.$router.push({ path: '/login' })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
	/deep/ .el-tree-node.is-expanded>.el-tree-node__children {
		display: flex!important;
		flex-wrap: wrap!important;
	}
@keyframes error404animation {
  0% {
    transform: rotateZ(0deg);
  }
  20% {
    transform: rotateZ(-60deg);
  }
  40% {
    transform: rotateZ(-10deg);
  }
  60% {
    transform: rotateZ(50deg);
  }
  80% {
    transform: rotateZ(-20deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
.error404 {
  &-body-con {
    width: 700px;
    max-width: 700px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    &-title {
      text-align: center;
      font-size: 240px;
      font-weight: 700;
      color: #2d8cf0;
      height: 260px;
      line-height: 260px;
      margin-top: 40px;
      span {
        display: inline-block;
        color: #19be6b;
        font-size: 230px;
        animation: error404animation 3s ease 0s infinite alternate;
      }
    }
    &-message {
      display: block;
      text-align: center;
      font-size: 30px;
      font-weight: 500;
      letter-spacing: 12px;
      color: #dddde2;
    }
  }
  &-btn-con {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 40px;
  }
}
</style>
<style>
  @media screen and (max-width: 500px) {
     body {
       width: 100vw!important;
       min-width: 300px!important;
     }
     .error404-body-con {
       width: 90%!important;
     }
  }
</style>
